<template>
  <div class="ac">
    <cnp>
      <h1>活动列表</h1>
    </cnp>
    <saixuan class="sx">
      <el-input placeholder="输入活动标题关键字......" v-model="inpval" clearable></el-input>
    </saixuan>
    <div class="actCon">
      <!-- header -->
       <div class="ac-title">
          <slot name="left">
            <div class="ac-title-left">
              <img src="../assets/h1.png" alt />
              <span>{{n.head}}</span>
            </div>
          </slot>
          <slot name="right">
             <div class="ac-title-right">
            <el-button style="width: 103px;height:32px;border: 1px solid #a760f6;" type="primary">
              <img src="../assets/btnimg1.png" class="el-icon-circle-plus-outline" />
              <router-link id="router-span1" to="/NewActiv" tag="span">新增活动</router-link>
            </el-button>
            <el-button style="width: 103px;height:32px;border: 1px solid #a760f6;" type="primary">
              <img src="../assets/btnimg2.png" class="el-icon-delete" alt />
              <router-link id="router-span2" to="/ActRecycle" tag="span">回收站</router-link>
            </el-button>
          </div>
          </slot>
        </div>
      <!-- content -->
      <div class="con-table">
        <div class="table-head">
          <li class="headerLi1"></li>
          <li class="headerLi2">标题</li>
          <li class="headerLi2">缩略图</li>
          <li class="headerLi2">活动状态</li>
          <li class="headerLi2">报名费</li>
          <li class="headerLi3">上传人</li>
          <li class="headerLi4">上传时间</li>
          <li class="headerLi5">操作</li>
        </div>
        <div class="table-con" v-for="(item,index) in list" :key="item.id">
          <li class="headerLi1">
            <input type="checkbox" @click="danClick(index)" :checked="item.isShow" />
          </li>
          <li class="headerLi2">
            <p>
              <span>{{item.tit}}</span>
            </p>
          </li>
          <li class="headerLi2">
            <img src="../assets/actimg.png" alt />
          </li>
          <li class="headerLi2">{{item.state}}</li>
          <li class="headerLi2">{{item.pir}}</li>
          <li class="headerLi3">{{item.name}}</li>
          <li class="headerLi4">{{item.time}}</li>
          <li class="headerLi5">
            <router-link to="/NewActiv">编辑</router-link>
            <span @click="open" :plain="true">加入回收站</span>
            <router-link to="/ActivityReg">查看报名信息</router-link>

          </li>
        </div>
      </div>
      <!--  -->
      <div class="acti-footer">
        <div class="acti-input">
          <input type="checkbox" :checked="allCheck1" @click.stop="allCheckbox" />
          <span>全选</span>
          <em @click="del1">批量加入回收站</em>
        </div>
        <div class="fyq">
          <template>
            <div class="block">
              <el-pagination
                :background="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="100"
              ></el-pagination>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cnp from "../components/biaoti";
import saixuan from "../components/saixuan";
export default {
  name: "Activity",
  components: {
    cnp,
    saixuan,
  },
  data() {
    return {
       n: {
        tit: "新增活动",
        path: "/NewActiv",
        head: "活动列表",
      },
      inpval: "",
      list: [
        {
          id: 1,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 2,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 3,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 4,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 5,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 6,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 7,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 8,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 9,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 10,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
        {
          id: 11,
          tit: "【小小渔民体验营】两天一晚渔村生存记",
          state: "活动进行中",
          pir: "256.00",
          name: "Daisy",
          time: "2019-01-25 10:55",
          isShow: false,
        },
      ],
      allCheck1: false,
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    };
  },
  methods: {
    allCheckbox: function () {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
     open: function () {
   this.$message({
     message: "加入回收站成功！",
     type: "success",
     center: true
   });
 },
//  全选
allCheckbox:function(){
  this.list.forEach((v) => {
    v.isShow = !this.allCheck1
    
  });
  this.allCheck1 = !this.allCheck1
},
// 单选
danClick(index){
  this.list[index].isShow = !this.list[index].isShow
  let bool = this.list.every((item) =>{
    return item.isShow == true
  })
  if(bool){
    this.allCheck1 = bool
  }else{
    this.allCheck1 = bool
  }
},
// 批量删除
  del1() {
      console.log();
      this.$message({
        message: "加入回收站成功！",
        type: "success",
        center: true
      });
    },
  },
};
</script>
<style>
em,i {
  font-style: normal;
}
li,
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.actCon {
  border: 1px solid #e4e4e4;
  min-height: 548px;
  margin-top: 10px;
  padding: 0 25px;
}
.ac {
  width: 1100px;
  margin: 0 auto;
}
.ac-wrap {
  margin: 0 auto;
  width: 1100px;
  height: 1174px;
  border: 1px solid #eeeeee;
  margin-top: 10px;
  padding: 0 20px;
}
.ac-title {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ac-title-left {
  display: flex;
  position: relative;
  padding-top: 16px;
}
.ac-title-left img {
  display: block;
  width: 17px;
  height: 14px;
}
.ac-title-left span {
  font-size: 14px;
  color: #666;
  position: relative;
  left: 4px;
  top: -3px;
}
.ac-title-right .el-button {
  position: relative;
  background: #fff;
}

.ac-title-right {
  padding-top: 12px;
}
#router-span1 {
  font-size: 12px;
  position: absolute;
  right: 12px;
  top: 10px;
  color: #a760f6;
}
.el-icon-circle-plus-outline {
  position: absolute;
  left: 16px!important;
  top: 7px;
}
#router-span2 {
  font-size: 12px;
  position: absolute;
  right: 18px;
  top: 10px;
  color: #a760f6;
}
.el-icon-delete {
  position: absolute;
  left: 20px!important;
  top: 7px;
}


.add-article,
.recycle-bin {
  width: 99px;
  height: 32px;
  border: 1px solid rgba(145, 55, 243, 1);
  border-radius: 3px;
  box-sizing: border-box;
  font-size: 12px;
  color: #9137f3;
  margin-top: 16px;
}
.rec-button {
  float: left;
  width: 99px;
  height: 32px;
  /* margin-top: 16px; */
  background-color: none !important;
  font-size: 12px;
  /* line-height: 32px; */
  border: 1px solid #9137f3;
  border-radius: 4px;
}
.el-icon-circle-plus-outline {
  position: absolute;
  left: 10px;
  top: 7px;
}
#router-span2 {
  font-size: 12px;
  position: absolute;
  right: 18px;
  top: 10px;
  color: #a760f6;
}
.el-icon-delete {
  position: absolute;
  left: 16px;
  top: 7px;
}
.table-head {
  display: flex;
  justify-content: space-between;
  width: 1048px;
  background: #9137f3;
}
.table-head li {
  float: left;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 60px;
  height: 60px;
}
.headerLi1 {
  width: 80px;
}
.headerLi2 {
  width: 118px;
}
.headerLi3 {
  width: 115px;
}
.headerLi4 {
  width: 122px;
}
.headerLi5 {
  width: 257px;
}
.table-con {
  width: 1048px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e4e4e4;
  background: #fff;
  font-size: 12px;
  text-align: center;
}
.table-con li {
  float: left;
  line-height: 90px;
  height: 90px;
}
.table-con li p {
  margin-top: 30px;
  line-height: 14px !important;
}
.table-con li img {
  margin-top: 10px;
}
.headerLi5 span {
  color: #9137f3;
  margin: 0 5px;
}
.headerLi5 a{
  color: #9137f3;
  margin: 0 5px;
  text-decoration: none;
}

/*  */
.acti-footer {
  height: 100px;
  width: 100%;
  line-height: 100px;
  margin-top: 10px;
}
.acti-input {
  float: left;
  margin-left: 33px;
}
.acti-input input {
  margin-right: 8px;
}
.acti-input em {
  margin-left: 10px;
  color: #999999;
  font-size: 14px;
}
.fyq {
  margin-top: 34px;
  float: right;
}
.el-pagination__sizes {
    margin: 0 10px 0 0;
    font-weight: 400;
    color: #606266;
}
.el-input__inner {
    height: 37px;
}
.el-pagination {
    white-space: nowrap;
    padding: 2px 36px;
    color: #303133;
    font-weight: 700;
}
</style>